<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="box form">
			<view class="line acea-row">
				<view class="tit"> 真实姓名 </view>
				<input type="text" v-model="list.name" placeholder="请输入真实姓名" placeholder-class="psc">
			</view>
			<view class="line acea-row row-between-wrapper">
				<view class="tit"> 性别 </view>
				<u-radio-group placement="row" @change="gender_change" activeColor="#347DFE">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in gender_list" :key="index"
						:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line acea-row">
				<view class="tit"> 手机号 </view>
				<input type="number" v-model="list.mobile" placeholder="请输入手机号" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 年龄 </view>
				<input type="number" v-model="list.age" placeholder="请输入年龄" placeholder-class="psc">
			</view>
			
			<view class="line acea-row">
				<view class="tit"> 职业年限 </view>
				<input type="number" v-model="list.work_year" placeholder="请输入职业年限" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 学历 </view>
				<u-radio-group placement="row" @change="education_change" activeColor="#347DFE">
					<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in education_list" :key="index"
						:label="item.value" :name="item.name" labelSize="14" labelColor="#000">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line">
				<view class="tit">上传头像</view>
				<view class="upload-item">
					<view class="upload-box">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="1" width="154rpx" height="154rpx">
							<image src="../../static/images/upload.png" mode="widthFix"
								style="width: 154rpx;height: 154rpx;"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="line">
				<view class="tit">技能证书</view>
				<view class="upload-item">
					<view class="upload-box">
						<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic"
							:previewFullImage="true" name="2" multiple :maxCount="4" width="154rpx" height="154rpx">
							<image src="../../static/images/upload.png" mode="widthFix"
								style="width: 154rpx;height: 154rpx;"></image>
						</u-upload>
					</view>
				</view>
			</view>
			<view class="line acea-row">
				<view class="tit"> 医学背景 </view>
				<input type="text" v-model="list.medical_background" placeholder="请输入" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 科室 </view>
				<input type="text" v-model="list.keshi" placeholder="请输入" placeholder-class="psc">
			</view>
			<view class="line acea-row">
				<view class="tit"> 我的简介 </view>
				<input type="text" v-model="list.content" placeholder="请输入" placeholder-class="psc">
			</view>
			<view class="line acea-row picker" @click="this.$refs.jpSelect1.toOpen()">
				<view class="tit"> 服务医院 </view>
				<input type="text" v-model="hospital" placeholder-class="psc" disabled>
			</view>
		</view>
		<view class="bottom-box">
			<!-- <ysxy @radioCheck="radioCheck"></ysxy> -->
			<radio-group name="" class="radio-line acea-row row-middle">
				<label class=" acea-row row-middle" @click="radioCheck">
					<radio style="transform: scale(.8);" />我已阅读并同意
				</label>
				<navigator url="/bundle/pages/about/apply_notice">《陪诊师和服务人员入驻协议》 </navigator>
			</radio-group>
			<view class="btn-box">
				<view class="btn" @click="submit"> 立即申请</view>
			</view>
		</view>
		<!-- 服务医院 -->
		<!-- 	<u-picker :show="hospital_picker_show" :columns="hospital_list" @confirm="hospital_confirm" @close="hospital_picker_show = false"
		 keyName="name"></u-picker> -->
		<jpSelect ref="jpSelect1" :list="hospital_list" @checked="hospital_checked" select="more" color="#007AFF"
			:item="hospital_select" tite="请选择服务医院">
		</jpSelect>
		
		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import jpSelect from '@/components/jp-select/jp-select.vue';
	export default {
		components: {
			jpSelect
		},
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '申请成为应答师',
					'color': false,
				},
				gender_list: [{
					name: '男',
					value: '男',
				}, {
					name: '女',
					value: '女',
				}],
				education_list: [{
					name: '高中',
					value: '高中',
				}, {
					name: '专科',
					value: '专科',
				}, {
					name: '本科',
					value: '本科',
				}],
				fileList1: [],
				fileList2: [],
				// 服务医院
				hospital: [], //输入框回显
				hospital_select: "", // 弹窗回显
				hospital_list: [], //弹窗列表
				isRead: false,
				list: {
					openid: '',
					user_id: '',
					hospital_id: '',
					name: '',
					sex: '',
					mobile: '',
					age: '',
					keshi: '',
					zhicheng: '',
					staff_education: '',
					medical_background: '',
					work_year: '',
					content: '',
					head_image: '',
					skill_images: '',
				},
			};
		},
		onLoad(option) {
			this.list.openid = uni.getStorageSync('openid');
			this.list.user_id = option.id;
			// 医院
			this.hospitalList();

		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async hospitalList() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/hospital/lists',
					data: {
						page: '',
						limit: '',
					}
				})
				this.hospital_list = res.data.data;
			},
			// 性别
			gender_change: function(name) {
				console.log('gender', name);
				this.list.sex = name;
			},
			// 学历
			education_change: function(name) {
				console.log('education', name);
				this.list.staff_education = name;
			},
			// 服务医院
			hospital_checked(el) {
				this.hospital_select = el;
				var hospital = [];
				var hospital_id = [];
				el.forEach(function(e) {
					hospital.push(e.name)
					hospital_id.push(e.id)
				});
				this.hospital = hospital;
				this.list.hospital_id = hospital_id;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(JSON.parse(result).data)
					const img = JSON.parse(result).data
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: img
					}))
					fileListLen++
				}
				console.log(event.name, this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://dsby.hearoommed.com/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
						// url: 'http://192.168.0.3:11122/api/uploads/uploadImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'image',
						formData: {
							openid: uni.getStorageSync('openid')
						},
						success: (res) => {
							console.log('11111')
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						},
						fail(res) {
							console.log('fail', res)
						}
					});
				})
			},
			radioCheck() {
				this.isRead = true;
			},
			submit() {
				if (this.fileList1.length !== 0) {
					this.list.head_image = this.fileList1[0].url;
				}
				if (this.fileList2.length !== 0) {
					var imgArr = [];
					this.fileList2.forEach(function(item) {
						imgArr.push(item.url)
					});
					this.list.skill_images = imgArr.toString();
				}
				if (!this.list.name) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入姓名'
					})
					return
				}
				if (!this.list.sex) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请选择性别'
					})
					return
				}
				if (!this.list.mobile) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入手机号'
					})
					return
				}
				if (!this.list.age) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请输入年龄'
					})
					return
				}
				if (!this.list.head_image) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请上传头像'
					})
					return
				}
				
				if (!this.isRead) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请阅读协议并同意'
					})
					return
				}
				console.log(this.list)
				this.applyStaff();
			},
			// 申请应答师
			async applyStaff() {
				var that = this;
				const res = await this.$myRequest({
					url: '/api/Wxfw/apply_yds',
					data: that.list
				})
				if (res.data.status == 200) {
					that.$refs.uToast.show({
						type: 'success',
						message: '申请成功，请等待电话审核！',
						complete() {
							uni.reLaunch({
								url:'/pages/user/index'
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		padding: 20rpx;
	}

	.box {
		width: 100%;
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;
	}

	.form .line:last-of-type {
		border-bottom: none;
	}

	.form .line .tit {
		color: #000;
		width: 140rpx;
		text-align-last: justify;
	}

	.form .line input,
	.form .line picker {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line radio-group label {
		margin-left: 30rpx;
	}

	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.upload-box {
		padding-bottom: 20rpx;
	}

	.upload-item.mr {
		margin-right: 30rpx;
	}

	.upload-item .cont {
		text-align: center;
		line-height: 1.5;
	}

	.bond {
		color: #FF0000;
	}

	.bottom-box {
		width: 100%;
		padding-top: 60rpx;
		height: 224rpx;
		z-index: 10;

	}

	.radio-line {
		font-size: 28rpx;
		color: #B0B0B0;
		padding-bottom: 30rpx;
	}

	.radio-line navigator {
		color: #347DFE;
	}

	.btn-box {
		padding-top: 20rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
